<template>
  <!-- 顾客详情页 -->
  <div>
    <div class="header"></div>
    <div class="content">
      <div>
        <div class="touxiang">
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />

          <br />
          <div style="height: 50px">
            <img
              src="./img/头像.png"
              alt=""
              style="height: 25px; margin-left: -30px; margin-top: 55px"
            />
          </div>
          <span
            ><el-button type="success" @click="edit()"
              >修改个人信息</el-button
            ></span
          >
          <br />
          <br />

          <div class="right">
            <div style="height: 15px">
              <img
                src="./img/修改(1).png"
                alt=""
                style="height: 30px; margin-left: -30px; margin-top: 18px"
              />
            </div>
            <span>
              <el-button type="primary" @click="Upimg"
                >修改用户头像</el-button
              ></span
            >
          </div>
        </div>
        <h1 style="font-family:楷体;color:grey">用户头像</h1>
        <div class="img">
          <img :src="customerData.userFace" alt="" />
        </div>
        <br />
        <br />
        <label class="lable">登录用户</label>
        <el-tag>{{ customerData.username }}</el-tag>
        <br />
        <br />
        <label class="lable">用户姓名</label>
        <el-tag>{{ customerData.realname }}</el-tag>
        <br />
        <br />
        <label class="lable">性别</label>
        <el-tag>{{ customerData.gender }}</el-tag>
        <br />
        <br />
        <label class="lable">生日</label>
        <el-tag>{{ customerData.birth | fmtDate_global }}</el-tag>
        <br />
        <br />
        <label class="lable">email</label>
        <el-tag>{{ customerData.email }}</el-tag>
        <br />
        <br />
        <label class="lable">状态</label>
        <el-tag>{{ customerData.status }}</el-tag>
        <br />
        <br />
        <label class="lable">民族</label>
        <el-tag>{{ customerData.nation }}</el-tag>
        <br />
        <br />
        <label class="lable">手机号</label>
        <el-tag>{{ customerData.telephone }}</el-tag>
        <br />

        <br />
        <!-- <div class="wk">
            <img src="./img/wk.png" alt="">
           </div>  -->
        <!-- <div> <img src="./img/或才人.gif" alt=""></div> -->
      </div>
      <div class="hz">
        <img
          src="https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w%3D580/sign=dabf54a58f1001e94e3c1407880f7b06/51b94a59252dd42a51471ce7013b5bb5c8eab847.jpg"
          alt=""
          style="height: 100px"
        />
      </div>
    </div>

    <!-- 模态框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      @close="dialogClose"
    >
      <!-- 表单区域 -->
      <!-- :model 表单对象 最终我们要提交的那个表单对象 -->
      <!-- :rules 表单验证的规则 -->
      <!-- ref 类比与 id 最终通过ref找到这张表单 -->
      <el-form :model="customerData2" ref="guke_form" label-width="80px">
        <!-- 名称 -->
        <el-form-item
          label="用户名"
          prop="username"
          style="pointer-events: none"
        >
          <el-input v-model="customerData2.username" disabled></el-input>
        </el-form-item>
        <!-- 真实姓名 -->
        <el-form-item label="真实姓名" prop="realnaeme">
          <el-input v-model="customerData2.realname"></el-input>
        </el-form-item>
        <!-- telephone -->
        <el-form-item label="电话" prop="telephone">
          <el-input v-model="customerData2.telephone"></el-input>
        </el-form-item>
        <!-- 民族 -->
        <el-form-item label="民族" prop="nation">
          <el-input v-model="customerData2.nation"></el-input>
        </el-form-item>
        <!-- email -->
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model.number="customerData2.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-radio
            v-model="customerData2.gender"
            label="male"
            style="color: grey"
            >男人</el-radio
          >
          <el-radio
            v-model="customerData2.gender"
            label="female"
            style="color: grey"
            >女人</el-radio
          >
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker
            v-model="customerData2.birth"
            type="datetime"
            placeholder="选择日期时间"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <!-- 底部操作按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <!-- 提交表单后 调用重置表单的方法 -->
        <el-button type="primary" @click="submitForm"> 确 定 </el-button>
      </span>
    </el-dialog>

    <!-- 修改头像模态框 -->
    <el-dialog title="修改头像" :visible.sync="ImgdialogVisible" width="30%">
      <el-upload
        class="avatar-uploader"
        :action="uploadFileURL"
        :show-file-list="false"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
      >
        <img v-if="imageUrl" :src="upImageForm.userface" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ImgdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="upImage">确定修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { log } from "@antv/g2plot/lib/utils";
import { get, post } from "@/utils/request";

// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
//预览路径 上传路径
import { showFileURL, uploadFileURL } from "@/utils/config";
//时间戳
const moment = require("moment");
export default {
  data() {
    return {
      // 上传文件的服务器地址
      uploadFileURL,
      id: "",
      //  对用户信息修改的模态框
      dialogInfoFormVisible: false,
      // 对用户头像修改的模态框
      ImgdialogVisible: false,
      // 对头像修改的表单
      upImageForm: {},
      customerId: "",
      customerData: {},
      customerData2: {},
      dialogVisible: false,
      dialogTitle: "编辑个人详情",
      gukeForm: {},

      // rules: {
      //   // 产品名称
      //   username: [
      //     { required: true, message: "请输入顾客用户名", trigger: "blur" },
      //   ],
      //   // 产品栏目
      //   telephone: [
      //     { required: true, message: "请输入电话", trigger: "change" },
      //   ],
      //   // 价格
      //   realname: [{ required: true, message: "请输入真名", trigger: "blur" }],
      //   // 封面
      //   userFace: [
      //     { required: true, message: "请选择图片", trigger: "change" },
      //   ],
      // },
      // 图片预览的路径
      imageUrl: "",
    };
  },
  computed: {},
  methods: {
    //获取接口参数
    async getCustomer() {
      let data = {
        id: this.customerId,
      };
      let res = await get("/baseUser/findUserDetailsById", data);
      this.customerData = res.data;
      console.log(this.customerData);
    },
    Upimg() {
      this.ImgdialogVisible = true;
      this.upImageForm.id = this.customerData.id;
      this.upImageForm.userface = "";
    },
    // 提交用户头像
    async upImage() {
      let res = await post("/baseUser/alterUserface", this.upImageForm);
      console.log(res, "---");
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
      }
      this.ImgdialogVisible = false;
      this.getCustomer(this.customerData.id);
    },
    handleSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // 上传成功之后 更新productForm.photo的路径
      this.upImageForm.userface = showFileURL + res.data.id;
    },
    beforeUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
    },

    edit() {
      // 将当前点击的这一行的对象 赋值到 表单对象里
      // 浅拷贝 赋值对象的引用 对象的内存地址 用的还是用一个
      // 深拷贝
      this.customerData2 = { ...this.customerData };
      // this.customerData2.gender = this.customerData.genders
      // // 预览图片 地址赋值
      // this.imageUrl = this.gukeForm.photo;
      // // 设置模态框的标题
      // this.dialogTitle = "更新个人信息";
      // // 模态框显示出来
      this.dialogVisible = true;
    },
    xiangqing(id) {
      this.$router.push({
        path: "Details",
        query: { id },
      });
    },
    async submitForm() {
      // this.$refs["guke_form"].validate(async (valid) => {
      //   if (valid) {
      // 发送表单验证的请求 提交表单对象
      let res = await post("/baseUser/saveOrUpdate", this.customerData2);
      // 给用户一个成功的提示
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        // 重新刷新页面的数据
        this.getCustomer();
        // 调用关闭模态框的方法
        this.dialogVisible = false;
      } else {
        this.$message.error(res.message);
      }
      console.log(this.customerData2.birth);
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });
    },
    dialogClose() {
      // 重置表单
      this.$refs["guke_form"].resetFields();
      // 关闭模态框
      setTimeout(() => {
        this.dialogVisible = false;
      }, 200);
    },
  },
  created() {
    //获取顾客信息ID的所有参数
    this.customerId = this.$route.query.id;
    //自动获取顾客的信息
    this.getCustomer();
  },

  mounted() {},
};
</script>
<style scoped>
.img > img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.lable {
  vertical-align: middle;

  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.touxiang {
  float: right;
}
/* .wk {
        width: 200px;
        height: 180px;
        border: 1px solid #333;
        overflow: hidden;
        float: left;
    }
    .wk img {
        height: 180px;
        animation: wk_move 1s infinite steps(8) ;
    }
    @keyframes wk_move {
        from {
            margin-left: 0px;
        }
        to {
            margin-left: -1600px;
        }
    } */

.hz {
  float: right;
  height: 100px;

  background-color: pink;
  margin-top: -700px;
}
</style>